<template>
  <el-card>
    <div slot="header">无人机历史飞行影像</div>
    <div class="info">
      <el-table
        :data="tableData"
        height="390"
        style="width: 100%; font-size: 20px"
      >
        <el-table-column prop="name" label="名称" width="300" align="center">
        </el-table-column>
        <el-table-column
          prop="navid"
          label="无人机ID"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="task"
          label="任务编号"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="size"
          label="文件大小"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column>
          <el-button type="primary" round>播放</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="info2">
      <el-card class="box-card" shadow="never">
        <!-- <el-dropdown>
          <el-button type="primary">
            选择查看项<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>飞行轨迹</el-dropdown-item>
              <el-dropdown-item>高度变化图</el-dropdown-item>
              <el-dropdown-item>速度变化图</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown> -->
        <!-- <el-card class="middle"> -->
        <video
          ref="vPull"
          controls
          autoplay
          muted
          width="60%"
          height="80%"
          class="video"
        ></video>
        <!-- </el-card> -->
      </el-card>
    </div>
  </el-card>
</template>
  
  <script>
import flv from "flv.js";
export default {
  data() {
    return {
      player: null,
      tableData: [
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "1",
          size: "333M",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "453GVXVG8J75R4",
          task: "2",
          size: "18M",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "SAD4F6RT4T5GB9",
          task: "3",
          size: "47M",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "0WQD3E3RT4T5YF",
          task: "4",
          size: "13M",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "HK214I0SA818CA",
          task: "5",
          size: "68M",
        },
        {
          name: "大疆Mavic2 行业2",
          navid: "0WQD3E3RT4T5YF",
          task: "6",
          size: "13M",
        },
        {
          name: "大疆Mavic2 行业2",
          navid: "0WQD3E3RT4T5YF",
          task: "7",
          size: "13M",
        },
      ],
    };
  },
  mounted() {
    this.play("http://47.100.121.5/live?port=1935&app=myapp&stream=test");
  },
  methods: {
    showvideo() {
      this.play("http://47.100.121.5/live?port=1935&app=myapp&stream=test");
    },
    play(urls) {
      let video = this.$refs.vPull; //定义播放路径
      if (flv.isSupported()) {
        this.player = flv.createPlayer(
          {
            type: "flv",
            isLive: true,
            url: urls,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            isLive: true,
            lazyLoad: false,
          }
        );
      } else {
        console.log("不支持的格式");
        return;
      }
      this.player.attachMediaElement(video);
      this.player.load();
      this.player.play();
    },
    destruction() {
      //销毁对象
      if (this.player) {
        this.player.pause();
        this.player.destroy();
        this.player = null;
      }
    },
  },
};
</script>

  <style scoped>
.info {
  height: 400px;
}
.info2 {
  height: 640px;
}
.box-card {
  height: 650px;
}
.video {
  margin-left: 400px;
}
</style>
  